<template>
  <div class="index">
    <div class="mall">
      <div class="swipper">
        <van-swipe :autoplay="3000">
          <van-swipe-item>
            <img src="http://www.zishayy.com/shangchuan/timeibaochun.jpg" alt="">
          </van-swipe-item>
          <van-swipe-item>
            <img src="http://www.zishayy.com/shangchuan/xilixiaoshipiao.jpg" alt="">
          </van-swipe-item>
          <van-swipe-item>
            <img src="http://www.zishayy.com/shangchuan/yuhualong.jpg" alt="">
          </van-swipe-item>
        </van-swipe>
      </div>
<!--  商城导航栏 -->
      <div class="nav">
        <div class="item" v-for="(item,index) in nav" :v-key="item.id">
          <router-link :to="item.to">
            <img :src="item.url" alt="">
            <p>{{item.name}}</p>
          </router-link>
        </div>
      </div>
      <van-divider/>
      <router-view></router-view>
<!--      <div class="newList" id="new">
&lt;!&ndash;        <p class="title">今日上新</p>&ndash;&gt;
        <div class="goods">
          <router-link :to="{path: '/details',query: {item: item}}" v-for="(item,index) in newList" class="item" :v-key="index">
            <img :src="item.url" alt="">
            <p>{{item.name}}</p>
          </router-link>
        </div>
      </div>

      <div class="hotList" id="hot">
        <p class="title">热卖产品</p>
        <div class="goods">
          <router-link :to="{path: '/details',query: {item: item}}" class="item" v-for="(item,index) in hotList" :v-key="index">
            <img :src="item.url" alt="">
            <p>{{item.name}}</p>
          </router-link>
        </div>
      </div>

      <div class="goodList" id="mall">
        <p class="title">紫砂商城</p>
        <div class="goods">
          <router-link :to="{path: '/details',query: {item: item}}" class="item" v-for="(item,index) in goodList" :v-key="index">
            <img :src="item.url" alt="">
            <p>{{item.name}}</p>
          </router-link>
        </div>
      </div>-->
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data(){
    return{
      nav:[
        {
          id: 1,
          name: '紫砂壶',
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi1%2F3251658667%2FO1CN01BN3O2L2DtXNHuiyFC_%21%210-item_pic.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645783942&t=2579385a76812b5ae286280240926b81",
          to: '/mall/goodList/0'
        },
        {
          id: 2,
          name: '紫砂器件',
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.99114.com%2Fgroup1%2FM00%2F7B%2F73%2FwKgGS1kVm3eAao3VAAFR7-Vx5Nw836.jpg&refer=http%3A%2F%2Fimg.99114.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645783889&t=f45f35e5daf1768139943f6ed29635a4",
          to: '/mall/goodList/1'
        },
        {
          id: 3,
          name: '茶具',
          url: "http://t14.baidu.com/it/u=3585238103,116770909&fm=224&app=112&f=JPEG?w=500&h=500",
          to: '/mall/goodList/2'
        },
        {
          id: 4,
          name: '紫砂定制',
          url: "https://img0.baidu.com/it/u=486426843,1370795809&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500",
          to: '/custom'
        },
        {
          id: 5,
          name: '茶叶',
          url: "https://img1.baidu.com/it/u=2847950270,1251268538&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333",
          to: '/mall/goodList/4'
        },
        {
          id: 6,
          name: '今日特惠',
          url: "https://img1.baidu.com/it/u=3169971965,4255335316&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
          to: '/mall/goodList/5'
        },
        {
          id: 7,
          name: '销量排行',
          url: "https://img0.baidu.com/it/u=1756172107,4027879958&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
          to: '/mall/goodList/6'
        },
        {
          id: 8,
          name: '积分礼品',
          url: "https://img1.baidu.com/it/u=2185415096,231507108&fm=253&fmt=auto&app=138&f=JPEG?w=567&h=500",
          to: '/gift'
        }
      ]
    }
  }
}
</script>

<style scoped lang="less">
.van-swipe-item{
  text-align: center;
}
//导航菜单
.nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .item{
    padding: 10px 5px;
    text-align: center;
    width: 21%;
    img{
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
    a{
      color: white;
      //font-weight: bolder;
    }
    .router-link-exact-active {
      color: black;
    }
  }
}
//商品列表
.mall{
  .newList{
    padding: 20px 0;
  }
  .title{
    font-size: 3rem;
    color: black;
    border-bottom: 2px solid gainsboro;
    font-weight: bold;
    font-family: myFont;
    text-align: center;
  }
}
.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 10px;
  .item{
    width: 45%;
    //padding-bottom: 10px;
    background-color: #C66C50 !important;
    padding: 5px;
    margin-bottom: 10px;
  }
  p{
    color: black;
    text-align: center;
    font-weight: bolder;
  }
}
</style>
